<template>
  <div>
    <div class="content">
<!--      zjWzyl全改为lilun-->
      <el-form ref="form" :model="form" label-width="200px">
        <el-form-item label="药物理论日产生量：" style="width: 603px;font-size: 8ex" prop="lilun"
                      :rules="[
            {required: true, message: '药物理论日产生量不能为空',trigger: 'blur' }
          ]">
          <el-input v-model="form.lilun" style="width:83%; margin-left: -70px" placeholder="请输入内容" @change="setOther">
            <template slot="append">kg/d</template>
          </el-input>
<!--          <el-button round @click="showAll">其他方式获取</el-button>-->
        </el-form-item>

<!--        <el-col :span="23">
          <div class="grid-content bg-purple">计算预处理工序中废水排放量填写以下项</div>
        </el-col>-->

<!--        <br>
        <br>
        <el-form-item label="每日处理纺织品量：" style="width: 600px;font-size: 8px" prop="jjFzpl">
          <el-input v-model="form.jjFzpl" style="width: 100%;" placeholder="请输入内容" @change="setOther">
            <template slot="append">t/d</template>
          </el-input>
        </el-form-item>
        <el-form-item label="上游环节带入浆料油剂比重：" style="width: 600px;font-size: 8ex" prop="yjbz"
                      :rules="[
            {required: true, message: '油剂比重不能为空',trigger: 'blur'}
          ]">
          <el-input v-model="form.yjbz" style="width: 100%;" placeholder="请输入内容(0~1范围内)">
            <template slot="append">（百分比请换算成小数填入）</template>
          </el-input>
        </el-form-item>
      </el-form>

      <el-form ref="form" :model="form2" label-width="200px" v-show=showOther>
        <el-form-item>
          <el-button round @click="getInput_1">计算每日所需化学物质用量</el-button>
        </el-form-item>
        <el-form-item label="登记量：" style="width: 600px;font-size: 8ex" prop="zjDjl">
          <el-input v-model="form2.zjDjl" style="width: 100%;" placeholder="请输入内容" @change="setInput_1">
            <template slot="append">t/d</template>
          </el-input>
        </el-form-item>

        <el-form-item label="主要排放源占比：" style="width: 600px;font-size: 8ex" prop="zjPfyzb">
          <el-input v-model="form2.zjPfyzb" style="width: 100%;" placeholder="请输入内容(0~1范围内)" @change="setInput_1">
            <template slot="append">（百分比请换算成小数填入）</template>
          </el-input>
        </el-form-item>
        <el-form-item label="年工作时间：" style="width: 600px;font-size: 8ex" prop="zjJobtime">
          <el-input v-model="form2.zjJobtime" style="width: 100%;" placeholder="请输入内容" @change="setInput_1">
            <template slot="append">d/y</template>
          </el-input>
        </el-form-item>-->

      </el-form>
      <br>
      <br>
      <el-button style="margin-top: 12px;" @click="goBack">上一步</el-button>
      <el-button style="margin-top: 12px;" @click="sendDirectUsage">下一步</el-button>
    </div>

  </div>

</template>

<script>

export default {
  name: "DirectUsage",
  data() {
    return {
      form: {
        lilun: "",
        jjFzpl: "",
        yjbz: "1",
      },
      form2: {
        zjDjl: "",
        zjPfyzb: "",
        zjJobtime: "",
      },
      showOther: false,
    }
  },
  watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
    'form2.zjPfyzb': function (newVal, oldValue) {
      if (parseFloat(newVal) < 0 || parseFloat(newVal) > 1) {
        this.form2.zjPfyzb = ''
        this.$message({
          message: "数值只能在0-1之间",
          type: 'warning'
        });
      }
    },
    'form2.zjPfyzb': function (newVal, oldValue) {
      if (newVal < 1500 || newVal > 2200) {
        this.form.lilun = ''
        this.$message({
          message: "数值只能在1500-2200之间",
          type: 'warning'
        });
      }
    },
  },
  methods: {
    showAll() {
      this.showOther = true;
    },
    setOther() {
      this.form2.zjDjl = '';
      this.form2.zjPfyzb = '';
      this.form2.zjJobtime = '';
    },
    setInput_1() {
      this.form.lilun = '';
    },
    getInput_1() {
      if (this.form2.zjDjl != '' && this.form2.zjPfyzb != '' && this.form2.zjJobtime != '') {
        this.form.zjWzyl = parseFloat(this.form2.zjDjl * this.form2.zjPfyzb / this.form2.zjJobtime / this.form2.zjJobtime).toFixed(6);
      } else {
        this.$message("请检查数据是否完整")
      }
    },
    goBack() {
      this.$emit('goBack');
    },
    sendDirectUsage() {
      if (this.form.lilun != '') {
        //let flag = {flag:'1'}
        let usageParameter = {
          flag: '1',
          lilun: this.form.lilun,
          zjDjl: this.form2.zjDjl,
          zjPfyzb: this.form2.zjPfyzb,
          zjJobtime: this.form2.zjJobtime,
          jjFzpl: this.form.jjFzpl,
          yjbz: this.form.yjbz,
          jjYjl: '',
          jjYxcfhl: '',
          jjFzpbl: ''
        }
        this.$store.commit("setUsageParameter", usageParameter);
        this.$emit('listenChild');
      } else {
        this.$message("每日所需化学物质不能为空")
      }

    }
  },

}
</script>

<style scoped lang="scss">

</style>
